<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scrollWatching</title>
    <link href="scrollWatching.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="#chap1" id="link1">chap1</a></li>
        <li><a href="#chap2" id="link2">chap2</a></li>
        <li><a href="#chap3" id="link3">chap3</a></li>
        <li><a href="#chap4" id="link4">chap4</a></li>
    </ul>
</div>
<div id="content">
    <div id="chap1">
        <h1>第一部分</h1>
        <h2>chap1</h2>
        <p>第一部分内容监听第一部分内容监听第一部分内容监听第一部分内容监听
            第一部分内容监听第一部分内容监听第一部分内容监听第一部分内容监听
            第一部分内容监听第一部分内容监听第一部分内容监听第一部分内容监听
            第一部分内容监听第一部分内容监听第一部分内容监听第一部分内容监听
            第一部分内容监听第一部分内容监听第一部分内容监听第一部分内容监听
            第一部分内容监听第一部分内容监听第一部分内容监听第一部分内容监听
            第一部分内容监听第一部分内容监听第一部分内容监听第一部分内容监听
            第一部分内容监听第一部分内容监听第一部分内容监听第一部分内容监听
            第一部分内容监听第一部分内容监听第一部分内容监听第一部分内容监听
            第一部分内容监听第一部分内容监听第一部分内容监听第一部分内容监听
            第一部分内容监听第一部分内容监听第一部分内容监听第一部分内容监听
        </p>
    </div>
    <div id="chap2">
        <h1>第二部分</h1>
        <h2>chap2</h2>
        <p>第二部分内容监听第二部分内容监听第二部分内容监听第二部分内容监听
            第二部分内容监听第二部分内容监听第二部分内容监听第二部分内容监听
            第二部分内容监听第二部分内容监听第二部分内容监听第二部分内容监听
            第二部分内容监听第二部分内容监听第二部分内容监听第二部分内容监听
            第二部分内容监听第二部分内容监听第二部分内容监听第二部分内容监听
            第二部分内容监听第二部分内容监听第二部分内容监听第二部分内容监听
            第二部分内容监听第二部分内容监听第二部分内容监听第二部分内容监听
            第二部分内容监听第二部分内容监听第二部分内容监听第二部分内容监听
            第二部分内容监听第二部分内容监听第二部分内容监听第二部分内容监听
            第二部分内容监听第二部分内容监听第二部分内容监听第二部分内容监听
            第二部分内容监听第二部分内容监听第二部分内容监听第二部分内容监听
        </p>
    </div>

    <div id="chap3">
        <h1>第三部分</h1>
        <h2>chap3</h2>
        <p>第三部分内容监听第三部分内容监听第三部分内容监听第三部分内容监听
            第三部分内容监听第三部分内容监听第三部分内容监听第三部分内容监听
            第三部分内容监听第三部分内容监听第三部分内容监听第三部分内容监听
            第三部分内容监听第三部分内容监听第三部分内容监听第三部分内容监听
            第三部分内容监听第三部分内容监听第三部分内容监听第三部分内容监听
            第三部分内容监听第三部分内容监听第三部分内容监听第三部分内容监听
            第三部分内容监听第三部分内容监听第三部分内容监听第三部分内容监听
            第三部分内容监听第三部分内容监听第三部分内容监听第三部分内容监听
            第三部分内容监听第三部分内容监听第三部分内容监听第三部分内容监听
            第三部分内容监听第三部分内容监听第三部分内容监听第三部分内容监听
            第三部分内容监听第三部分内容监听第三部分内容监听第三部分内容监听
        </p>
    </div>

    <div id="chap4">
        <h1>第四部分</h1>
        <h2>chap4</h2>
        <p>第四部分内容监听第四部分内容监听第四部分内容监听第四部分内容监听
            第四部分内容监听第四部分内容监听第四部分内容监听第四部分内容监听
            第四部分内容监听第四部分内容监听第四部分内容监听第四部分内容监听
            第四部分内容监听第四部分内容监听第四部分内容监听第四部分内容监听
            第四部分内容监听第四部分内容监听第四部分内容监听第四部分内容监听
            第四部分内容监听第四部分内容监听第四部分内容监听第四部分内容监听
            第四部分内容监听第四部分内容监听第四部分内容监听第四部分内容监听
            第四部分内容监听第四部分内容监听第四部分内容监听第四部分内容监听
            第四部分内容监听第四部分内容监听第四部分内容监听第四部分内容监听
            第四部分内容监听第四部分内容监听第四部分内容监听第四部分内容监听
            第四部分内容监听第四部分内容监听第四部分内容监听第四部分内容监听
        </p>
    </div>
</div>
<script src="jquery.min.js"></script>
<script src="scrollWatching.js"></script>
</body>
</html>